<template>
	<view class="wui-tabs" :style="[backgroundComputed,heightComputed]">
		<view class="wui-tabs-flex" v-if="type === 'flex'">
			<view class="tab" @click="changeTab(index)" :class="[current === index ? 'tab-active' : 'tab-default']"
				v-for="(tab, index) in tabsList" :key="index"
				:style="[current === index ? activeColorComputed : defaultColorComputed,lineHeightComputed,fontSizeComputed]">
				<text class="iconfont" :class="[tab.icon]" :style="[iconSizeComputed]" v-if="tab.icon"></text>
				<text v-if="tab.name">{{ tab.name }}</text>
			</view>
		</view>
		<scroll-view v-if="type === 'scroll'" class="wui-tabs-scroll" :scroll-left="scrollLeft" scroll-x
			scroll-with-animation>
			<view class="tab" @click="changeTab(index)" :class="[current === index ? 'tab-active' : 'tab-default']"
				v-for="(tab, index) in tabsList" :key="index"
				:style="[current === index ? activeColorComputed : defaultColorComputed, scrollItemWidthComputed,lineHeightComputed,fontSizeComputed]">
				<text class="iconfont" :class="[tab.icon]" :style="[iconSizeComputed]" v-if="tab.icon"></text>
				<text v-if="tab.name">{{ tab.name }}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: 'w-tabs',
		props: {
			tabsList: {
				type: Array,
				default: () => []
			},
			type: {
				type: String,
				default: 'flex'
			},
			height: {
				type: [Number, String],
				default: 80
			},
			// type=scroll的时候定义每一个item的宽度
			scrollItemWidth: {
				type: Number,
				default: 160
			},
			// 下滑线的高度（rpx）
			lineHeight: {
				type: Number,
				default: 4
			},
			// 当前选中
			current: {
				type: Number,
				default: 0
			},
			// 选中的颜色
			activeColor: {
				type: String,
				default: '#39B54A'
			},
			// 默认的颜色
			defaultColor: {
				type: String,
				default: '#8799A3'
			},
			// 背景颜色
			background: {
				type: String,
				default: '#fff'
			},
			// 字体大小
			fontSize: {
				type: Number,
				default: 28
			},
			// 图标大小
			iconSize: {
				type: Number,
				default: 34
			},

		},
		data() {
			return {
				scrollLeft: 0, // 'scroll-view'滚动的距离（px）
			};
		},
		computed: {
			backgroundComputed() {
				return {
					'--background': this.background
				};
			},
			lineHeightComputed() {
				return {
					'--line-height': uni.upx2px(this.lineHeight) + 'px'
				};
			},
			heightComputed() {
				return {
					'--height': uni.upx2px(this.height) + 'px'
				}
			},
			fontSizeComputed() {
				return {
					'--font-size': uni.upx2px(this.fontSize) + 'px'
				};
			},
			iconSizeComputed() {
				return {
					'--icon-size': uni.upx2px(this.iconSize) + 'px'
				};
			},
			scrollItemWidthComputed() {
				return {
					'--width': uni.upx2px(this.scrollItemWidth) + 'px'
				};
			},
			defaultColorComputed() {
				return {
					'--default-color': this.defaultColor
				}
			},
			activeColorComputed() {
				return {
					'--active-color': this.activeColor
				}
			}
		},
		methods: {
			changeTab(index) {
				// 处理滚动
				if (this.type === 'scroll') {
					let left = index * uni.upx2px(this.scrollItemWidth);
					let right = (index + 1) * uni.upx2px(this.scrollItemWidth);
					this.scrollLeft = left - this.systemInfo.screenWidth / 2 + (right - left) / 2;
				}
				this.$emit('change', index);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.wui-tabs {
		height: var(--height);
		background-color: var(--background, #fff);

		.wui-tabs-flex {
			display: flex;
			height: inherit;
		}

		.wui-tabs-scroll {
			white-space: nowrap;
			display: flex;
			height: inherit;

			.tab {
				display: inline-flex;
				align-items: center;
				width: var(--width);
				height: 100%;
			}
		}

		.tab {
			flex: 1;
			flex-shrink: 0;
			transition: all 0.3s;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			font-size: var(--font-size);

			.iconfont {
				font-size: var(--icon-size);
			}
		}

		.tab:before {
			content: '';
			position: absolute;
			right: 0;
			height: 40%;
			border-right: 1rpx solid #dedede;
		}

		.tab:last-child:before {
			border-right-color: transparent;
		}

		.tab:after {
			content: '';
			position: absolute;
			bottom: 0;
			width: 100%;
			height: var(--line-height);
			background-color: var(--line-color);
			transform: scaleX(0.4);
		}

		.tab-active:after {
			content: '';
			background-color: var(--active-color);
		}

		.tab-active {
			color: var(--active-color);
		}

		.tab-default {
			color: var(--default-color);
		}
	}
</style>
